<template lang="html">
  <div class="bckbox">
      <div class="header"></div>
      <el-form ref="registerRef" :rules="registerrules" class="refisterform" :model="register">
          <el-form-item prop="Name">
              <el-input v-model="register.Name" id="username" placeholder="Name"></el-input>
          </el-form-item>
          <el-form-item class="margintop" prop="Email">
              <el-input v-model="register.Email" id="email" placeholder="Email"></el-input>
          </el-form-item>
          <el-form-item class="margintop" prop="Entity">
              <el-input v-model="register.Entity" id="entity" placeholder="Entity"></el-input>
          </el-form-item>
          <el-form-item class="buttonbox margintop">
              <el-button @click="handleSubmit">SUBMIT</el-button>
          </el-form-item>
      </el-form>
      <div class="footer"></div>
  </div>

</template>

<script>
const config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}
export default {
  data() {
    return {
      register: {
        Name: '',
        Email: '',
        Entity: ''
      },
      registerrules: {
        Name: [{
            required: true,
            message: 'Please enter your name!',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 30,
            message: 'The length is between 2 and 30 characters!',
            trigger: 'blur'
          }
        ],
        Email: [{
            required: true,
            message: 'Please enter email address!',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 50,
            message: 'The length is between 2 and 50 characters!',
            trigger: 'blur'
          }
        ],
        Entity: [{
            required: true,
            message: 'Please enter entity!',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 200,
            message: 'The length is between 2 and 200 characters!',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log("提交报名信息")
      var that = this
      this.$refs.registerRef.validate(async() => {
        if (this.register.Name.length === 0) {
          this.$message.error('Please enter you name!')
          document.querySelector('#username').focus()
          return
        }
        var reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
        if (!reg.test(that.register.Email)) {
          this.$message.error('Please enter the correct email address!')
          document.querySelector('#email').focus()
          return
        }
        if (this.register.Entity.length === 0) {
          this.$message.error('Please enter entity!')
          document.querySelector('#entity').focus()
          return
        }
        // 提交
        var postData = "name=" + this.register.Name;
        postData += "&email=" + this.register.Email;
        postData += "&entity=" + this.register.Entity;
        //postData += "&csrfmiddlewaretoken=" + document.getElementsByName("csrfmiddlewaretoken")[0].value;
        console.log(postData)
        console.log(this.$http);
        this.$http.post("/register", postData, config).then(
          res => {
            console.log(res);
            // 提交成功
            if (res.data.success === "Registed") {
              this.$notify({
                title: "Submitted successfully!",
                // message: '',
                position: 'top-left',
                type: 'success'
              });
              window.sessionStorage.setItem('isSuccess', '0')
              this.register.Name = ''
              this.register.Email = ''
              this.register.Entity = ''

            } else {
              this.$notify({
                title: res.data.error,
                // message: '',
                position: 'top-left',
                type: 'success'
              });
            }
          },
          err => {
            console.debug(err);
          }
        );

      })
    }
  }
}
</script>

<style lang="css">
* {
    margin: 0;
    padding: 0;
}
.bckbox {
  position: absolute;
    width: 100%;
    min-height: 100%;
    background: url('../assets/bg2.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.refisterform {
    margin-left: 38px;
    width: 20%;
}
.el-input__inner {
    border-color: #D2D285 !important;
    color: #fff !important;
    background-color: #000 !important;
    font-size: 16px!important;
}
.header {
    margin-left: 38px;
    width: 80%;
    height: 250px;
    color: #fff;
    background: url('../assets/header.png') no-repeat
}
.footer {
   margin-left: 38px;
    width: 40%;
    height: 180px;
    background: url('../assets/footer.png') no-repeat;
    background-color: #000 !important;
}
/* .margintop {
    margin-top: 60px;
} */

@media only screen and (max-height:768px) and (min-height: 480px;){
  .el-form-item {
     margin-bottom: 22px!important;
  }
}

@media only screen and (max-height:960px) and (min-height: 769px){
  .el-form-item {
     margin-bottom: 36px!important;
  }
}

@media only screen and (max-height:1080px) and (min-height: 961px){
  .el-form-item {
     margin-bottom: 48px!important;
  }
}

@media only screen and (max-height:1500px) and (min-height: 1081px){
  .el-form-item {
     margin-bottom: 60px!important;
  }
}


.el-button {
    width: 100%;
    -webkit-box-shadow: 0px 0px 100px !important;
    -moz-box-shadow: 0px 0px 100px !important;
    box-shadow: 0 0 20px #989888 !important;
}
</style>
